<template>
  <div class="container">
    <div class="login">
      <!-- <div @click="login" class="login">登录</div> -->
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>登录/注册</span>
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="SenderId：">
            <el-input
              v-model="form.senderId"
              placeholder="请输入您的senderId"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()" size="small">登录</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <div class="tip">
          使用如：00000000-0000-0000-0000000000000009 的账号注册
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="RegisterId">
            <el-input
              v-model="form.registerId"
              placeholder="请输入您的registerId"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onRegister()" size="small">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        senderId: null,
        registerId:null
      },
    };
  },
  methods: {
    open(msg, type) {
      this.$message({
        message: msg,
        type: type,
      });
    },
    onSubmit() {
      this.$http
        .get("/api/login", { params: { uuid: this.form.senderId } })
        .then((res) => {
          if (res.data.status == 200) {
            this.$store.commit('setSender',this.form.senderId);
            this.$router.push("/profile");
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          this.open(err, "warning");
        });
    },
    onRegister() {
      this.$http
        .get("/api/register",{params:{uuid:this.form.registerId}})
        .then((res) => {
          if (res.data.status == 200) {
            this.open(res.data.msg,'success');
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          this.open(err, "warning");
        });
    },
  },
};
</script>

<style scoped>
.tip {
  font-size: 10px;
  margin-right: 10px;
}
.container {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

.login {
  padding-top: 300px;
  width: 50vh;
  margin: 0 auto;
}
</style>
